<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table border :data="scope.row.tabs" style="width: 100%">
            <el-table-column prop="activity" label="活动"></el-table-column>
            <el-table-column prop="discount" label="折扣"></el-table-column>
            <el-table-column prop="discountprice" label="折后价"></el-table-column>
            <el-table-column prop="time" label="活动时间"></el-table-column>
            <el-table-column prop="enable" label="是否启用">
              <template slot-scoped="scope">
                <img
                  src="../../assets/img/dui.png"
                  v-if="scope.row.enable"
                  style="width:14px;height:14px"
                  alt
                />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="text">编辑</el-button>
              <el-button type="text">停用</el-button>
              <el-button type="text">删除</el-button>
            </el-table-column>
          </el-table>
          <div style="text-align:center;margin-top:10px">
            <el-button type="primary" size="mini" @click="adddiscount">添加折扣活动</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="套餐名" prop="mealname"></el-table-column>
      <el-table-column label="套餐类型" prop="mealtype"></el-table-column>
      <el-table-column label="适用类别" prop="applicabletype"></el-table-column>
      <el-table-column label="适用门店" prop="applicableshop"></el-table-column>
      <el-table-column label="适用时间段" prop="applicabletime"></el-table-column>
      <el-table-column label="费用" prop="price"></el-table-column>
      <el-table-column label="顺序权重" prop="sort"></el-table-column>
      <el-table-column label="启用" prop="enable">
        <template slot-scope="scope">
          <img
            src="../../assets/img/dui.png"
            v-if="scope.row.enable"
            style="width:14px;height:14px"
            alt
          />
        </template>
      </el-table-column>
      <el-table-column label="显示" prop="display">
        <template slot-scope="scope">
          <img
            src="../../assets/img/dui.png"
            v-if="scope.row.enable"
            style="width:14px;height:14px"
            alt
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <el-button type="text">编辑</el-button>
        <el-button type="text">停用</el-button>
        <el-button type="text">隐藏</el-button>
        <el-button type="text">删除</el-button>
        <el-button type="text" @click="setsort">排序</el-button>
      </el-table-column>
    </el-table>
    <el-dialog title="套餐排序" :visible.sync="sortpopup" width="40%">
      <el-form ref="formInfo" :model="formInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="门店" prop="shop" label-width="100px">
          <span>{{formInfo.shop}}</span>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="100px">
          <el-input v-model="formInfo.date" placeholder="请输入日期" />
        </el-form-item>
        <el-form-item label="说明" prop="say" label-width="100px">
          <span>{{formInfo.say}}</span>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="sortpopup=false">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加折扣活动" :visible.sync="discountpopup" width="40%">
      <el-form
        ref="discountformInfo"
        :model="discountformInfo"
        class="demo-form-inline"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="活动名" prop="name" label-width="100px">
          <el-input v-model="discountformInfo.name" placeholder="请输入活动名" />
        </el-form-item>
        <el-form-item label="原价" prop="price" label-width="100px">
          <span>{{discountformInfo.price}}</span>
        </el-form-item>
        <el-form-item label="活动价" prop="activityprice" label-width="100px">
          <el-input v-model="discountformInfo.activityprice" placeholder="请输入活动价">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="活动日期" prop="value1" label-width="100px">
          <el-date-picker
            v-model="discountformInfo.value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="discountpopup=false">取消</el-button>
          <el-button type="primary" @click="submitFormdiscount('discountformInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table__expanded-cell {
  background: #f5f5f5;
}
</style>

<script>
export default {
  data() {
    return {
      value1: "",
      formInfo: {
        shop: "周卡：7天连续不间断使用（通用）",
        say: "按照权重由小到大在小程序显示顺序",
        date: "2022-12-12"
      },
      discountformInfo: {
        price:"40元",
        value1:"",
      },
      sortpopup: false,
      discountpopup: false,
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        activityprice: [
          { required: true, message: "请输入活动价格", trigger: "blur" }
        ],
        value1: [
          { required: true, message: "请输入活动日期", trigger: "blur" }
        ]
      },
      tableData: [
        {
          mealname: "周卡：7天连续不间断使用（通用）",
          mealtype: "期卡",
          applicabletype: "帘子桌半开放格子桌",
          applicableshop: "莲花北店龙华店大剧院店车公庙店",
          applicabletime: "工作日：00:00—23:59节假日：00:00—23:59",
          price: "40元 ",
          sort: "2",
          enable: true,
          display: false,
          tabs: [
            {
              activity: "暂无",
              discount: "50%",
              discountprice: "20元",
              time: "2021-12-28~2021-12-29"
            }
          ]
        },
        {
          mealname: "周卡：7天连续不间断使用（通用）",
          mealtype: "期卡",
          applicabletype: "帘子桌半开放格子桌",
          applicableshop: "莲花北店龙华店大剧院店车公庙店",
          applicabletime: "工作日：00:00—23:59节假日：00:00—23:59",
          price: "40元 ",
          sort: "3",
          enable: true,
          display: false,
          tabs: [
            {
              activity: "暂无",
              discount: "50%",
              discountprice: "20元",
              time: "2021-12-28~2021-12-29"
            }
          ]
        },
        {
          mealname: "周卡：7天连续不间断使用（通用）",
          mealtype: "期卡",
          applicabletype: "帘子桌半开放格子桌",
          applicableshop: "莲花北店龙华店大剧院店车公庙店",
          applicabletime: "工作日：00:00—23:59节假日：00:00—23:59",
          price: "40元 ",
          sort: "5",
          enable: true,
          display: false,
          tabs: [
            {
              activity: "暂无",
              discount: "50%",
              discountprice: "20元",
              time: "2021-12-28~2021-12-29"
            }
          ]
        },
        {
          mealname: "周卡：7天连续不间断使用（通用）",
          mealtype: "期卡",
          applicabletype: "帘子桌半开放格子桌",
          applicableshop: "莲花北店龙华店大剧院店车公庙店",
          applicabletime: "工作日：00:00—23:59节假日：00:00—23:59",
          price: "40元 ",
          sort: "4",
          enable: true,
          display: false,
          tabs: [
            {
              activity: "暂无",
              discount: "50%",
              discountprice: "20元",
              time: "2021-12-28~2021-12-29"
            }
          ]
        }
      ]
    };
  },
  methods: {
    setsort() {
      this.sortpopup = true;
    },
    submitForm() {
      this.sortpopup = false;
    },
    submitFormdiscount(discountformInfo) {
      this.$refs[discountformInfo].validate(valid => {
        if (valid) {
          this.discountpopup = false
        } else {
          return false;
        }
      });
    },
    adddiscount() {
        this.discountpopup = true
    }
  }
};
</script>
